import React, { useState } from "react";
import { View, Text, Image, TouchableOpacity } from "react-native";
import { useTheme } from "@/contexts/ThemeContext";
import { Ionicons } from "@expo/vector-icons";
import { createStyles } from "./index.style";
import InviteMembers from "./InviteMembers";
import RemoveMembers from "./RemoveMembers";
import ViewAllMembersModal from "./ViewAllMembersModal";
import { GroupMember, GroupMemberRole, GroupChat } from "@/types/group-chat";


// 模拟群聊数据，实际应用中应从props或store获取
const mockGroupData: GroupChat = {
  id: "group123456",
  name: "技术交流群",
  avatar: "https://randomuser.me/api/portraits/men/32.jpg",
  memberCount: 56,
  maxMemberCount: 200,
  createTime: "2023-01-01",
  ownerId: "1",
};

// 模拟群成员数据，实际应用中应从API或store获取
const mockMembers: GroupMember[] = [
  {
    id: "1",
    avatar: "https://randomuser.me/api/portraits/men/1.jpg",
    nickname: "挽",
    friendStatus: 1,
    createTime: "2023-01-01",
    uuid: "uuid1",
    remark: "老朋友",
    lastOnlineTime: null,
    groupRemark: "挽哥", // 群聊备注
    role: GroupMemberRole.OWNER, // 群主
  },
  {
    id: "2",
    avatar: "https://randomuser.me/api/portraits/women/2.jpg",
    nickname: "村幼",
    friendStatus: 1,
    createTime: "2023-01-02",
    uuid: "uuid2",
    remark: "幼幼",
    lastOnlineTime: null,
    groupRemark: "", // 无群聊备注
    role: GroupMemberRole.ADMIN, // 管理员
  },
  {
    id: "3",
    avatar: "https://randomuser.me/api/portraits/men/3.jpg",
    nickname: "苦瓜大王",
    friendStatus: 0,
    createTime: "2023-01-03",
    uuid: "uuid3",
    remark: "",
    lastOnlineTime: null,
    groupRemark: "瓜哥", // 群聊备注
    role: GroupMemberRole.MEMBER, // 普通成员
  },
  {
    id: "4",
    avatar: "https://randomuser.me/api/portraits/women/4.jpg",
    nickname: "静静",
    friendStatus: 1,
    createTime: "2023-01-04",
    uuid: "uuid4",
    remark: "静姐",
    lastOnlineTime: null,
    groupRemark: "静静姐", // 群聊备注
    role: GroupMemberRole.MEMBER, // 普通成员
  },
  {
    id: "5",
    avatar: "https://randomuser.me/api/portraits/men/5.jpg",
    nickname: "解木散",
    friendStatus: 0,
    createTime: "2023-01-05",
    uuid: "uuid5",
    remark: "",
    lastOnlineTime: null,
    groupRemark: "", // 无群聊备注
    role: GroupMemberRole.MEMBER, // 普通成员
  },
];

// 模拟群成员ID列表
const mockMemberIds = mockMembers.map((member) => member.id);

// 获取显示名称，优先级：群聊备注 > 好友备注 > 昵称
const getDisplayName = (member: GroupMember) => {
  // 检查是否有群聊备注
  if (member.groupRemark) {
    return member.groupRemark;
  }
  // 其次是好友备注
  if (member.remark) {
    return member.remark;
  }
  // 最后是昵称
  return member.nickname || "未命名用户";
};

const GroupMemberCard = () => {
  const { colors } = useTheme();
  const styles = createStyles(colors);
  const [inviteModalVisible, setInviteModalVisible] = useState(false);
  const [removeModalVisible, setRemoveModalVisible] = useState(false);
  const [viewAllModalVisible, setViewAllModalVisible] = useState(false);

  // 模拟数据
  const totalMembers = mockMembers.length;
  const members = mockMembers.map((member) => ({
    id: member.id,
    avatar: member.avatar,
    name: getDisplayName(member),
  }));

  const handleViewAllMembers = () => {
    // 显示查看所有成员模态框
    setViewAllModalVisible(true);
  };

  const handleInviteMembers = () => {
    // 显示邀请好友模态框
    setInviteModalVisible(true);
  };

  const handleRemoveMembers = () => {
    // 显示移除成员模态框
    setRemoveModalVisible(true);
  };

  const handleInvite = (selectedFriendIds: string[]) => {
    console.log("邀请好友IDs:", selectedFriendIds);
    // 在这里处理实际的邀请逻辑，例如调用API
  };

  const handleRemove = (selectedMemberIds: string[]) => {
    console.log("移除成员IDs:", selectedMemberIds);
    // 在这里处理实际的移除逻辑，例如调用API
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>群聊成员</Text>
        <TouchableOpacity style={styles.viewAll} onPress={handleViewAllMembers}>
          <Text style={styles.viewAllText}>查看{totalMembers}名群成员</Text>
          <Ionicons
            name="chevron-forward"
            size={16}
            color={colors.text.secondary}
          />
        </TouchableOpacity>
      </View>

      <View style={styles.membersContainer}>
        {members.map((member) => (
          <View key={member.id} style={styles.memberItem}>
            <Image source={{ uri: member.avatar }} style={styles.avatar} />
            <Text style={styles.memberName} numberOfLines={1}>
              {member.name}
            </Text>
          </View>
        ))}

        <TouchableOpacity
          style={styles.actionItem}
          onPress={handleInviteMembers}
        >
          <View style={styles.actionCircle}>
            <Ionicons name="add" size={24} color={colors.text.primary} />
          </View>
          <Text style={styles.memberName}>邀请</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.actionItem}
          onPress={handleRemoveMembers}
        >
          <View style={styles.actionCircle}>
            <Ionicons name="remove" size={24} color={colors.text.primary} />
          </View>
          <Text style={styles.memberName}>移除</Text>
        </TouchableOpacity>
      </View>

      {/* 邀请好友模态框 */}
      <InviteMembers
        visible={inviteModalVisible}
        onClose={() => setInviteModalVisible(false)}
        onInvite={handleInvite}
        groupId={mockGroupData.id}
        groupName={mockGroupData.name}
        groupAvatar={mockGroupData.avatar}
        groupMembers={mockMemberIds}
      />

      {/* 移除成员模态框 */}
      <RemoveMembers
        visible={removeModalVisible}
        onClose={() => setRemoveModalVisible(false)}
        onRemove={handleRemove}
        groupId={mockGroupData.id}
        groupName={mockGroupData.name}
        groupAvatar={mockGroupData.avatar}
        groupMembers={mockMemberIds}
        isAdmin={true}
        isOwner={false}
      />

      {/* 查看所有成员模态框 */}
      <ViewAllMembersModal
        visible={viewAllModalVisible}
        onClose={() => setViewAllModalVisible(false)}
        groupId={mockGroupData.id}
        groupName={mockGroupData.name}
        groupAvatar={mockGroupData.avatar}
        members={mockMembers}
        isAdmin={true}
        isOwner={false}
      />
    </View>
  );
};

export default GroupMemberCard;
